
## 2. 带有交互组件的MDX文件

**interactive.mdx**
```mdx
import { useState } from 'react';

# 交互式MDX示例

## 计数器组件

下面是一个在MDX中直接定义的计数器：

```jsx
function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div style={{ textAlign: 'center', margin: '2rem 0' }}>
      <p>当前计数: {count}</p>
      <button
        style={{
          padding: '0.5rem 1rem',
          margin: '0 0.5rem',
          backgroundColor: '#007acc',
          color: 'white',
          border: 'none',
          borderRadius: '4px'
        }}
        onClick={() => setCount(count + 1)}
      >
        增加
      </button>
      <button
        style={{
          padding: '0.5rem 1rem',
          margin: '0 0.5rem',
          backgroundColor: '#ff4444',
          color: 'white',
          border: 'none',
          borderRadius: '4px'
        }}
        onClick={() => setCount(count - 1)}
      >
        减少
      </button>
      <button
        style={{
          padding: '0.5rem 1rem',
          margin: '0 0.5rem',
          backgroundColor: '#666',
          color: 'white',
          border: 'none',
          borderRadius: '4px'
        }}
        onClick={() => setCount(0)}
      >
        重置
      </button>
    </div>
  );
}

<Counter />